<template>
  <div class="head">
    <div class="chart_box" ref="linenode"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      lineChart: [],
    }
  },
  mounted() {
    this.lineChart = echarts.init(this.$refs.linenode)
    const option = {
      backgroundColor: '#fff',
      title: {
        text: '学习时长',
        left: '18px',
        top: '20',
        textStyle: {
          color: '#002329',
          fontSize: 18,
          fontWeight: '800',
        },
      },
      color: ['#73A0FA', '#73DEB3', '#FFB761'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999',
          },
          lineStyle: {
            type: 'dashed',
          },
        },
      },
      grid: {
        left: '25',
        right: '25',
        bottom: '24',
        top: '75',
        containLabel: true,
      },
      legend: {
        data: ['订单总笔数', '钱包笔数', '借呗笔数'],
        orient: 'horizontal',
        icon: 'rect',
        show: true,
        left: 20,
        top: 25,
      },
      xAxis: {
        type: 'category',
        data: ['09.27', '09.28', '09.29', '09.30', '10.01', '10.02', '10.03'],
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      yAxis: {
        type: 'value',
        // max: max_value>=100? max_value + 100: max_value+10,
        // max: max_value > 100 ? max_value * 2 : max_value + 10,
        // interval: 10,
        // nameLocation: "center",
        axisLabel: {
          color: '#999',
          textStyle: {
            fontSize: 12,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#F3F4F4',
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      series: [
        {
          type: 'line',
          smooth: true,
          data: [13, 1, 4, 44, 45, 322, 76],
        },
        {
          type: 'line',
          smooth: true,
          data: [13, 54, 34, 344, 35, 53],
        },
      ],
    }
    this.lineChart.setOption(option)
  },
}
</script>

<style lang="less" scoped>
.head {
  width: 100%;
  margin-top:5vw ;

  .chart_box {
    width: 100%;
    height: 40vh;
    padding: 2% 5%;
  }
}
</style>
